import React, {Component} from 'react';
import axios from "axios";

class Cinema extends Component {
    ref = React.createRef()
    constructor() {
        super();
        this.state={
            inputValue:'',
            cinemaList:[],
        }

        axios({
            url: "https://m.maizuo.com/gateway?cityId=440600&ticketFlag=1&k=7560596",
            method:'get',
            headers: {
                'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.1","e":"17079850121452910126825473","bc":"440600"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res)
            this.setState({
                cinemaList:res.data.data.cinemas,
            })
        }).catch((err) => {

            }
        )
    }

    //后面生命周期更适合发生ajax
    render() {
        return (
            <div>
                <input type="text" value={this.state.inputValue} onChange={(event)=>{
                    this.setState({
                        inputValue:event.target.value
                    })
                }}/>
                {
                    this.getcinemaList().map(item=>
                        <dl key={item.cinemaId}>
                            <dt>{item.name}</dt>
                            <dd>{item.address}</dd>
                        </dl>
                    )
                }
            </div>
        );
    }
    getcinemaList(){
        return this.state.cinemaList.filter(item=>
            item.name.toUpperCase().includes(this.state.inputValue.toUpperCase())
            ||
            item.address.toUpperCase().includes(this.state.inputValue.toUpperCase())
        )
    }
}

export default Cinema;
